<template>
	<view class="report-container">
		<view class="report-bg"></view>
		<view class="report-main">
			<view class="cc-row card-total">
				<view class="cc-col card">
					<view class="card-tips">
						<cc-tooltip direction="bottom" text="管理的班级学员待消总课时"></cc-tooltip>
					</view>
					<view class="card-label">剩余课时</view>
					<view class="card-value">
						<text class="dinpro">{{ total.balance_sum.balance_hour || '0' }}</text>
					</view>
				</view>
				<view class="cc-col card">
					<view class="card-tips">
						<cc-tooltip direction="bottom" text="管理的班级学员待消总金额"></cc-tooltip>
					</view>
					<view class="card-label">剩余金额(元)</view>
					<view class="card-value">
						<text>￥</text>
						<text class="dinpro">{{ total.balance_sum.balance_fee || '0' }}</text>
					</view>
				</view>
			</view>
			<view class="cc-row mt25 card-total">
				<view class="cc-col card">
					<view class="card-tips">
						<cc-tooltip direction="bottom" text="管理的班级学员总数"></cc-tooltip>
					</view>
					<view class="card-label">总学员数</view>
					<view class="card-value">
						<text class="dinpro">{{ total.student_sum.status_all || '0' }}</text>
					</view>
				</view>
				<view class="cc-col card">
					<view class="card-tips">
						<cc-tooltip direction="bottom" text="管理的班级学员在读人数"></cc-tooltip>
					</view>
					<view class="card-label">在读学员</view>
					<view class="card-value">
						<text class="dinpro">{{ total.student_sum.status_1 || '0' }}</text>
					</view>
				</view>
			</view>
			<view class="mt25 fcb">
				<cc-date-picker prefixIcon="calendar-fill" :value.sync="query.date_range" @change="getReport"></cc-date-picker>
				<view class="font-24 fc font-primary" @tap="getReport">
					<view class="refresh-icon" :class="{ rotating: loading }">
						<cc-image width="28rpx" height="28rpx" :src="getImage('refresh')"></cc-image>
					</view>
					<text class="ml10">刷新</text>
				</view>
			</view>
			<view class="cc-row card-total mt25">
				<view class="cc-col card">
					<view class="card-label">教师授课课时</view>
					<view class="card-value dinpro">
						<text class="dinpro">{{ date.teaching_expend_hour || '0' }}</text>
					</view>
				</view>
				<view class="cc-col card">
					<view class="card-label">教师授课课节</view>
					<view class="card-value">
						<text class="dinpro">{{ date.cla_course_status_1 || '0' }}</text>
					</view>
				</view>
			</view>
			<view class="cc-row card-total mt25">
				<view class="cc-col card">
					<view class="card-tips">
						<cc-tooltip width="520rpx" direction="bottom" text="时间段内消耗学员课时">
							<view class="">1、课消方式为按课时,上课记录中学员实际消耗数量</view>
							<view class="">2、课消方式为按时段,一天算一个课时,一天结束后结算</view>
						</cc-tooltip>
					</view>
					<view class="card-label">消耗课时</view>
					<view class="card-value">
						<text class="dinpro">{{ date.expend_hour || '0' }}</text>
					</view>
				</view>
				<view class="cc-col card">
					<view class="card-tips">
						<cc-tooltip direction="bottom" text="时间段内消耗学员金额"></cc-tooltip>
					</view>
					<view class="card-label">消耗金额(元)</view>
					<view class="card-value dinpro">
						<text>￥</text>
						<text class="dinpro">{{ date.real_expend_hour_fee || '0' }}</text>
					</view>
				</view>
			</view>
			<view class="cc-row mt25 card-total">
				<view class="cc-col card">
					<view class="card-label">课时完成率</view>
					<view class="card-value">
						<text class="dinpro">{{ expendHourRate }}</text>
						<text>%</text>
					</view>
				</view>
				<view class="cc-col card">
					<view class="card-label">平均出勤率</view>
					<view class="card-value">
						<text class="dinpro">{{ AttendanceRate }}</text>
						<text>%</text>
					</view>
				</view>
			</view>

			<view class="card card-chart mt25">
				<view class="card-title">授课分析</view>
				<DataCharts v-if="lineData" type="column" :opts="lineOpts" :chartData="lineData" :canvas2d="true" canvasId="eDBEnayxjZPtYbzATMRACbAPruiQrSYq" :ontouch="true" />
			</view>

			<view class="card card-chart mt25">
				<view class="card-title">考勤分析</view>
				<DataCharts v-if="pieData" type="pie" :opts="pieOpts" :chartData="pieData" :canvas2d="true" canvasId="PXZVbLfAqfhGmBRtrxVpCOawQEGBebtF" :ontouch="true" />
			</view>
		</view>
	</view>
</template>

<script>
import { shortcuts } from '@/codecat/utils/index.js';
import { _divide, _add, _multiply } from '@/codecat/utils/decimal.js';
import { getReportApi } from '@/codecat/api/report';
import DataCharts from '@/codecat/components/qiun-data-charts/components/qiun-data-charts/qiun-data-charts';
export default {
	name: 'Report',
	components: {
		DataCharts
	},
	computed: {
		expendHourRate() {
			const { balance_sum } = this.total;
			const { expend_hour } = this.date;
			return _multiply(_divide(expend_hour, _add(balance_sum.balance_hour, expend_hour)), 100);
		},
		AttendanceRate() {
			const { attend_status_1, attend_status_all } = this.date;
			return _multiply(_divide(attend_status_1, attend_status_all), 100);
		}
	},
	data() {
		return {
			loading: false,
			query: {
				date_range: []
			},
			total: {
				balance_sum: {},
				student_sum: {}
			},
			date: {},
			lineData: null,
			lineOpts: {
				// color: ['#4e6eed'],
				padding: [40, 15, 0, 5],
				touchMoveLimit: 24,
				enableScroll: true,
				legend: {},
				xAxis: {
					disableGrid: true,
					scrollShow: true,
					itemCount: 4
				},
				yAxis: {
					showTitle: true,
					data: [
						{
							title: '课时',
							min: 0,
							titleOffsetY: -10
						}
					]
				},
				extra: {
					column: {
						width: 15,
						barBorderCircle: true,
						activeBgOpacity: 0.08,
						linearType: 'custom',
						customColor: ['#5cceff', '#4e6eed']
					}
				}
			},
			pieData: null,
			pieOpts: {
				color: ['#00b42a', '#f77234', '#f53f3f'],
				padding: [5, 5, 5, 5],
				enableScroll: false,
				extra: {
					pie: {
						activeOpacity: 0.5,
						activeRadius: 10,
						offsetAngle: 0,
						labelWidth: 15,
						border: false
					}
				}
			}
		};
	},
	onLoad() {
		this.query.date_range = shortcuts()[0].value();
		this.getReport();
	},
	methods: {
		getReport() {
			if (!this.token) return;
			this.loading = true;
			getReportApi(this.query)
				.then((res) => {
					this.loading = false;
					const { line_chart, total, date } = res.data;
					//total
					this.total = total;

					// date
					for (var key in date) {
						date[key] = this.getNumber(date[key]);
					}
					this.date = date;

					// line
					const lineData = {
						categories: line_chart.date,
						series: [
							{
								name: '课时',
								data: line_chart.expend_hour.map((e) => this.getNumber(e))
							}
						]
					};
					this.lineData = lineData;

					// pie
					const pieData = {
						series: [
							{
								data: [
									{
										name: '到课',
										value: this.getNumber(date.attend_status_1)
									},
									{
										name: '请假',
										value: this.getNumber(date.attend_status_2)
									},
									{
										name: '缺勤',
										value: this.getNumber(date.attend_status_3)
									}
								]
							}
						]
					};
					this.pieData = pieData;
				})
				.catch((_) => {
					this.loading = false;
				});
		},
		getNumber(val, nullState = 0) {
			return val === null || val === undefined ? nullState : Number(val);
		}
	}
};
</script>

<style scoped lang="scss">
@import './index.scss';
</style>
